<template>
	<div class="container">
		<!-- 头部 -->
		<div class="topBox">
			<div class="L"><router-link to="/">踏韵</router-link></div>
			<div class="C">
				<div class="saerchbox">
					<input name="" type="text" placeholder="请输入您要搜索的内容" /><img src="/assets/images/ss.png" />
				</div>
			</div>
			<div class="R"><img src="/assets/images/tr.png" /></div>
		</div>

		<!-- 轮播图 -->
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-if="data" height="240">
			<van-swipe-item
				v-for="item in swipeData"
				:key="item.id"
				@click="() => router.push('/product/info?proid=' + item.id)">
				<van-image width="100%" height="240" :src="item.thumbs_text[0]" fit="cover" />
			</van-swipe-item>
		</van-swipe>

		<!-- 分类 -->
		<div class="lqgwBox">
			<ul v-if="data">
				<li v-for="item in data.types" :key="item.id">
					<router-link :to="{ path: '/product/list', query: { typeid: item.id } }">
						<van-image width="60" height="60" :src="item.thumb_text" fit="cover" class="types-image" />
						<p>{{ item.name }}</p>
					</router-link>
				</li>
			</ul>
		</div>

		<!-- 广告图 -->
		<!-- <div class="adBox">
			<img src="/assets/images/banner.jpg" />
		</div> -->

		<!-- 推荐商品 -->
		<ul class="proul" v-if="data">
			<product-card
				v-for="item in data.news"
				:key="item.id"
				:src="item.thumbs_text[0]"
				:name="item.name"
				:price="item.price"
				:to="'/product/info?proid=' + item.id" />
		</ul>
	</div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

const router = useRouter();

const data = ref(null);

const swipeData = ref([]);

const getData = async () => {
	const res = await proxy.$GET({
		url: 'index/index',
	});

	if (res.code === 0) {
		proxy.$fail('获取数据失败');
		return;
	}

	data.value = res.data;

	swipeData.value = data.value.swipes;
};

getData();
</script>

<style lang="scss" scoped>
.lqgwBox {
	li a {
		text-align: center;
	}
}
</style>
